<template>
	<view>
	    <u-tabs
		@click="s"
		:current="current"
	    :list="data"
	    lineWidth="26"
	    :lineHeight="set.type=='line'?5:7"
	    :lineColor="set.type=='img'?'url(\''+set.icon+'\') 100% 100%':set.app_color"
	    :activeStyle="{
	        color: set.active_color,
			fontWeight: set.bold==1?'bold':'',
	        transform: 'scale(1.05)',
		
	    }"
	    :inactiveStyle="{
	        color: set.text_color,
	        transform: 'scale(1)'
	    }"
	    itemStyle="padding-left: 10px; padding-right: 10px; height: 34px;"
	    >
		  <view v-show="set.zhankai==1"
		                slot="right"
		                style="padding-left: 4px;margin-right: 10px;"
		                @click="open()"
		        >
		            <u-icon
		                    name="list"
		                    size="21"
		                    bold
		            ></u-icon>
		        </view>
	    </u-tabs>
			<u-popup :show="show" @close="show = false" mode="bottom" :closeable="true" :round="10">
				<view style="height: 300px;padding: 10px;overflow: auto;">
					<view style="padding: 6px 0;
					border-bottom: 1px #eee solid;margin-bottom: 6px;;">
						<view style="font-weight: bold;color: #666;display: flex;flex-direction: row;">
							<view style="margin-right: 4px;;">
								<u-icon name="list-dot" size="21" color="#666"></u-icon>
							</view>
							<text style="font-size: 14px;">{{set.zhankai_text}}</text></view>
					</view>
					<view class="box" style="">
						<view class="li" v-for="list in data" @click="s(list)">
							<u-button style="width: 100%;" plain :color="set.app_color" :text="list.name"></u-button>
						</view>
					</view>
				</view>
			</u-popup>
	</view>
</template>

<script>
	export default {
		name:"diy-tab",
		data() {
			return {
				show:false,
				data:[],
				current:0,
				}
		}
		,props:{
			set:{
				type:Object,
				default:()=>{
					return {
						
					}
				}
			}
		},created(){
			let p;
			let ac = false;
			for(let k in this.set.nav){
				p = {
					name:this.set.nav[k].name,
					url:this.set.nav[k].url
				} 
				if(this.set.nav[k].badge==1){
					p.badge = {
						isDot: true
					}
				}
				if(this.set.nav[k].status==0){
					p.disabled = true;
				}
				
				if(this.set.nav[k].active == 1&&!ac){
					ac = true;
					p.index = Number(k);
					this.current = Number(k);
				}
				this.data.push(p);
			}
			this.$forceUpdate();
			
		},methods:{
			open(){
				this.show = true;
			},
			s(e){
				this.show = false
				if(e.url&&e.url.length&&e.index!=this.current){
					this.navto(e.url)
				}
			}
		}
	}
</script>

<style>
.box{
	display: flex;flex-direction: row;justify-content: space-between;flex-wrap: wrap;
}
.li{
	width: 30%;
	overflow: hidden;display: flex;justify-content: center;align-items: center;
	font-size: 14px;margin-bottom: 10px;padding: 8px 0;border-radius: 5px;
}
</style>